<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频播放</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/js/element-ui/index.css">
    <link rel="stylesheet" href="/js/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/orderset.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--    <style>-->
<!--        .my-play-search {-->
<!--            background-color: #FFFFFF;-->
<!--            border-color: #FFFFFF;-->
<!--            color: #333333;-->
<!--        }-->
<!--        .my-play-search {-->
<!--            background-color: #ff5c38!important;-->
<!--            color: #ffffff!important;-->
<!--            border: none!important;-->
<!--        }-->
<!--        .my-play-search :hover{-->
<!--            background-color: #ff0e0b !important;-->
<!--        }-->

<!--        .intro{-->
<!--            float: right;-->
<!--            width: 500px;-->
<!--            height: 500px;-->
<!--            margin-top: 150px;-->
<!--        }-->

<!--        .cont{-->
<!--            font-size: 20px;-->
<!--        }-->

<!--    </style>-->
</head>

<body>
<div id="app">
    <div class="app-container">
        <div class="box">
            <div class="box ordersetting">
                <el-card class="box-card">
                    <div class="boxMain">
                        <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate()">上传数据库</el-button>
                        <!--
                            el-upload组件
                            1.action属性：上传后url接口处理
                            2.name属性：后端Controller方法形参名称必须与之一致
                            3.on-success属性：上传成功时回调的钩子函数
                            4.before-upload属性：在上传之前调用的钩子函数
                        -->
                        <el-upload action="/display/upload"
                                   name="videoFile"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccess"
                                   :before-upload="beforeAvatarUpload">
                            <el-button type="primary">上传文件</el-button>
                        </el-upload>
                    </div>

                </el-card>

            </div>
        </div>
    </div>
<!--    <template>-->
<!--        <div>-->
<!--            <video width="800" height="500" controls autoplay>-->
<!--                <source src="movie.ogg" type="video/ogg">-->
<!--                <source src="movie.mp4" type="video/mp4">-->
<!--                <source src="movie.webm" type="video/webm">-->
<!--                <object data="movie.mp4" width="320" height="240">-->
<!--                    <embed width="320" height="240" src="movie.swf">-->
<!--                </object>-->
<!--            </video>-->
<!--            <div class="intro">-->
<!--                <div>-->
<!--                    <span ><h2>离散数学</h2></span>-->
<!--                </div>-->
<!--                <div>-->
<!--                    <span class="cont">第一次开课</span><br/>-->
<!--                    <span class="cont">开课时间:</span>-->
<!--                    <span class="cont">2023年1月12日~2023年3月12日</span><br/>-->
<!--                    <span class="cont">学时安排:</span>-->
<!--                    <span class="cont">3~5小时每周</span>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->

<!--    </template>-->
</div>

</body>

<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            videoMode:{
                filename:"",
                id:""
            }
        },
        created() {
        },
        methods: {
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response, file) {
                //response的数据  flag: true, message: "图片上传成功", data: "5efca038-a934-46ae-99f5-2c57a906f4d9.jpg"
                console.log(response , file)
                if(response.flag){
                    this.$message.success(response.message);
                    this.filename=response.data.fileName
                    this.id=response.data.id

                    console.log(this.videoMode)

                }else{
                    this.$message.error(response.message);
                }
            },

            //上传之前执行
            beforeAvatarUpload(file) {
                const isMP4 = file.type === 'video/mp4';
                const isLt2M = file.size / 1024 / 1024 < 500;
                if (!isMP4) {
                    this.$message.error('上传视频只能是 MP4 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传视频大小不能超过 500MB!');
                }
                return isMP4 && isLt2M;
            },

            downloadTemplate(){
                axios.post('/display/upload',this.videoMode).then(response=>{
                    if (response.data.flag == true){
                        this.videoMode.filename = response.data.filename
                        this.videoMode.id = response.data.id
                        alert("上传成功")
                    }else {
                        this.$message.error(response.data.message);
                    }
                })
            }
        }
    })

</script>

</html>